<template>
  <view class="content">
    <view class="time-box">
      <view class="day-count">第{{ dayCount }}天</view>
      <view class="t-show">
				<view>
					<text v-if="yCount > 0">{{ String(yCount).padStart(2, '0') }}年</text>
					<text v-if="mCount > 0">{{ String(mCount).padStart(2, '0')}}个月</text>
					<text v-if="dCount > 0">{{ String(dCount).padStart(2, '0') }}天</text>
				</view>
				<view>
					<text v-if="hCount > 0">{{ String(hCount).padStart(2, '0') }}小时</text>
					<text v-if="hCount > 0">{{ String(fCount).padStart(2, '0') }}分钟</text>
					<text>{{ String(sCount).padStart(2, '0') }}秒</text>
				</view>
        <!-- {{ yCount }}年{{ mCount }}月 -->
        <!-- <view>{{ String(mCount).padStart(2, '0')}}个月{{ String(dCount).padStart(2, '0') }}天</view> -->
        <!-- <view>{{ String(hCount).padStart(2, '0') }}小时{{ String(fCount).padStart(2, '0') }}分钟{{ String(sCount).padStart(2, '0') }}秒</view> -->
      </view>
    </view>
  </view>
</template>

<script>
  import { calcTimeDifference, calcDayCount } from '@/utils/index'
  export default {
    data() {
      return {
        dayCount: 1,
        timeTimer: 0,
        bornTime: new Date(2024, 5, 22, 18, 38, 40), // new Date(2024, 5, 22, 18, 38, 40) //2024-6-22
        yCount: 0,
        mCount: 0,
        dCount: 0,
        hCount: 0,
        fCount: 0,
        sCount: 0,
      }
    },
    
    mounted() {
      this.getIntervals();
      this.setTimer();
      this.dayCount = calcDayCount(new Date(2024, 5, 22), new Date());
    },
    
    // onShow() {
    //   this.getIntervals();
    //   this.setTimer();
    //   console.log('onShow!');
    // },
    
    // onHide() {
    //   this.setTimer('clear')
    // },
    
    destroyed() {
      this.setTimer('clear');
      console.log('onUnload!');
    },
    methods: {
      getIntervals() {
				// const s = new Date(2024, 5, 22, 18, 38, 40);
				// const e = new Date(2025, 6, 22, 16, 30, 35);
				// const ret = calcTimeDifference(s, e);
        const ret = calcTimeDifference(this.bornTime, new Date());
        console.log(`${ret.yCount}年${ret.mCount}月${ret.dCount}天${ret.hCount}小时${ret.fCount}分钟${ret.sCount}秒`);
        this.yCount = ret.yCount;
        this.mCount = ret.mCount;
        this.dCount = ret.dCount;
        this.hCount = ret.hCount;
        this.fCount = ret.fCount;
        this.sCount = ret.sCount;
      },
      
      setTimer(action) {
        if (action === 'clear' && this.timeTimer) {
          clearInterval(this.timeTimer);
          this.timeTimer = 0;
          console.log('定时器清除');
          return
        }
        if (!this.timeTimer) {
          this.timeTimer = setInterval(() => {
            this.sCount += 1
            if (this.sCount >= 60) {
              this.sCount = 0;
              this.fCount += 1;
            }
            if (this.fCount >= 60) {
              this.fCount = 0;
              this.hCount += 1;
            }
            if (this.hCount >= 24) {
              this.hCount = 0;
              this.dCount += 1;
            }
            if (this.dCount >= 365) {
              this.getIntervals()
            }
          }, 1000);
          console.log('定时器创建');
        }
      },
    }
  }
</script>

<style lang="scss">
  .content {
    .time-box {
      position: relative;
      background-color: #fffae8;
      border-radius: 6rpx;
      display: flex;
      align-items:  center;
      justify-content: center;
      .day-count {
        float: right;
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        font-size: 26rpx;
        color: #e66669;
      }
      .t-show {
        line-height: 60rpx;
        color: #e77800;
        font-weight: 700;
        // text-align: left;
      }
    }
  }
</style>